<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import type { TabsPaneContext } from "element-plus";
import { ref } from "vue";
const value1 = ref("lucy");

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="申请PUSH" :back="true">
      <div class="md:px-30">
        <a-form :label-col="{ span: 8 }">
          <a-form-item label="类型">
            <a-select ref="select" v-model:value="value1" style="width: 300px" @change="handleChange">
              <a-select-option value="4">a</a-select-option>
              <a-select-option value="5">bbbbbbb</a-select-option>
              <a-select-option value="6">ccccccc</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="产品">
            <a-select ref="select" v-model:value="value1" style="width: 300px" @change="handleChange">
              <a-select-option value="1">a</a-select-option>
              <a-select-option value="2">bbbbbbb</a-select-option>
              <a-select-option value="3">ccccccc</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="到期时间"></a-form-item>

          <a-form-item label="接收方手机号" name="username">
            <a-input v-model:value="value1" style="width: 300px" />
          </a-form-item>

          <a-form-item label="手续费">
            <span>10元</span>
          </a-form-item>

          <a-form-item>
            <p class="flex items-center justify-center">
              <a-button type="primary">提交</a-button>
            </p>
          </a-form-item>
        </a-form>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="温馨提示" name="first">
            <ul class="text-sm text-gray-600 list">
              <li>
                主控系统PUSH过户手续费
                <span class="text-red-600">10元</span>
                ，由您支付承担；
              </li>
              <li>
                即将在
                <span class="text-orange-600">一个月内</span>
                到期的主控软件不支持PUSH申请；
              </li>
              <li>您在PUSH订单支付完成后，系统授权会自动转移到对方账户下；</li>
              <li>
                PUSH操作由您与对方自行沟通成交金额并确认完成款项支付，官方不接收成交款项，不做提现；
              </li>
              <li>
                由于近期诈骗事件频出，PUSH交易请交易双方谨慎申请，避免产生不必要的损失。
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped>
.list>li {
  margin-bottom: 15px;
}
</style>
